<template>
  <a-card :bordered="false">
    <BootstrapTable
      ref="table"
      :columns="columns"
      :data="tableData"
      :options="options"
    />
    <a-modal
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      你确定要删除吗？
    </a-modal>
  </a-card>
</template>

<script>
import '../../plugins/bootstrap-table'
import { getUserList ,deleteUser} from '../../api/user'
import StepByStepExamModal from './modules/StepByStepExamModal'
import ExamEditModal from './modules/ExamEditModal'
import UpdateAvatarModal from '@views/list/modules/UpdateAvatarModal'

export default {
  name: 'ExamTableList',
  components: {
    UpdateAvatarModal,
    ExamEditModal,
    StepByStepExamModal
  },
  data () {
    const that = this // 方便在bootstrap-table中引用methods
    return {
      currentDeleteId:'',
      visible: false,
      confirmLoading: false,
      // 表头
      columns: [
        {
          title: '序号',
          field: 'serial',
          formatter: function (value, row, index) {
            return index + 1 // 这样的话每翻一页都会重新从1开始，
          }
        },
        {
          title: '封面',
          field: 'userAvatar',
          width: '50px',
          formatter: (value, row) => {
            return '<img style="width:70px" class="exam-avatar"'+'src='+value+'>'+ '</img>'
          },
          events: {
            'click .exam-avatar': function (e, value, row, index) {
              that.handleAvatarEdit(row)
            }
          }
        },
        {
          title: '用户名',
          field: 'userNickname',
        },
        {
          title: '个人描述',
          field: 'userDescription',
          width: '250px'
        },
        {
          title: '手机号',
          field: 'userPhone'
        },
        {
          title: '更新时间',
          field: 'updateTime'
        },
        {
          title: '操作',
          field: 'action',
          width: '100px',
          formatter: (value, row) => {
            return '<button type="button" class="btn btn-success delete-user">删除</button>'
          },
          events: {
            'click .delete-user': function (e, value, row, index) {
              that.deleteUser(row)
            },
          }
        }
      ],
      tableData: [], // bootstrap-table的数据
      // custom bootstrap-table
      options: {
        search: true,
        showColumns: true,
        showExport: true,
        pagination: true,
        toolbar: '#toolbar',
        // 下面两行是支持高级搜索，即按照字段搜索
        advancedSearch: true,
        idTable: 'advancedTable'
        // 下面是常用的事件，更多的点击事件可以参考：http://www.itxst.com/bootstrap-table-events/tutorial.html
        // onClickRow: that.clickRow,
        // onClickCell: that.clickCell, // 单元格单击事件
        // onDblClickCell: that.dblClickCell // 单元格双击事件
      }
    }
  },
  mounted () {
    this.loadAll() 
  },
  methods: {
    deleteUser (row,value) {
      this.currentDeleteId = row.userId
      this.visible = true
    },
    handleAvatarEdit (record) {
      // Todo:修改考试信息和下面的题目，弹出一个可修改的输入框，实际上复用创建题目的模态框即可，还没做完
      console.log('开始更新封面啦')
      console.log(record)
      this.$refs.updateAvatarModal.edit(record)
    },
    handleOk(){
      deleteUser(this.currentDeleteId).then((res)=>{
        console.log(res,'delete');
        //todo  code==  重新加载数据
        this.loadAll()
      })
      this.visible = false
    },
    handleCancel(){
      this.visible = false
    },
    loadAll () {
      const that = this
      getUserList()
        .then(res => {
          res.data.forEach((item,index)=>{
            item.updateTime = item.updateTime.replace('T','--').split('.')[0]
          })
          that.tableData = res.data
          that.$refs.table._initTable()
        })
    }
  }
}
</script>
